import { Notification } from '@arco-design/web-react';
import { useState } from 'react';
import an58 from '@mmstudio/an000058';
import api from '../../../atoms/api';
import { Message as M1, Result as R1 } from '../../api/account/login.api';



export default function Login() {
	//账号密码
	//admin
	const [account, setAccount] = useState('');
	const [password, setPassword] = useState('');
	//输入图标改变
	const [accFlag, setAccflag] = useState(false);
	const [psdFlag, setPsdflag] = useState(false);
	//登录
	async function DoLogin() {
		//账号验证
		if (!account) {
			Notification.error({
				title: '提示',
				content: '账号不能为空！',
				position: 'bottomRight',
				showIcon: true
			});
			return;
		}
		//密码验证
		if (!password) {
			Notification.error({
				title: '提示',
				content: '密码不能为空！',
				position: 'bottomRight',
				showIcon: true
			});
			return;
		}
		//验证通过，调用登录服务
		try {
			const ret = await an58<R1, M1>(api['/api/account/login'], 'post', { account, password });
			if (ret) {
				window.location.assign(api['/api/account/go']);
			} else {
				Notification.error({
					title: '提示',
					content: '账号不登陆失败能为空！',
					position: 'bottomRight',
					showIcon: true
				});
			}
		} catch (error) {
			Notification.error({
				title: '提示',
				content: `登陆失败:${(error as Error).message}`,
				position: 'bottomRight',
				showIcon: true
			});
		}
	}
	return <>
		<div className='loginv'>
			<span className='lbl'>账号</span>
			<div className='inpv'>
				<img className='imgacc' src={accFlag ? '/images/acc1.png' : '/images/acc.png'} />
				<input type="text" placeholder="请输入您的账号" className="inp" onChange={(e) => {
					setAccount(e.target.value);
					setAccflag(Boolean(e.target.value));
				}} onKeyPress={(e) => {
					if (e.nativeEvent.key === 'Enter') {
						DoLogin();
					}
				}} />
			</div>
			<span className='lbl'>密码</span>
			<div className='inpv'>
				<img className='imgpwd' src={psdFlag ? '/images/mima1.png' : '/images/mima.png'} />
				<input type="password" placeholder="请输入您的密码" className="inp" onChange={(e) => {
					setPassword(e.target.value);
					setPsdflag(Boolean(e.target.value));
				}} onKeyPress={(e) => {
					if (e.nativeEvent.key === 'Enter') {
						DoLogin();
					}
				}} />
			</div>
			<input type="button" value="登    录" className="btn" onClick={DoLogin} />
			<style jsx>{`
.loginv{
display: flex;
flex-direction: column;
width: 25rem;
margin-bottom: 6rem;
margin-top: 1rem;
}
.lbl{
font-size: 1rem;
font-weight: 290;
color: #696F79;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
.inpv{
display: flex;
flex-direction: row;
align-items: center;
border-style: solid;
border-color: #8692A6;
border-width: 0.06rem;
border-radius: 0.375rem;
height: 4rem;
}
.imgacc{
width: 1.375rem;
 height: 1.375rem;
margin-left: 0.9rem;
}
.imgpwd{
height: 1.25rem;
 width: 1.125rem;
margin-left: 1rem;
}
.inp{
background-color: #FFFFFF;
 width: 100%;
border-style: none;
margin-left: 0.2rem;
font-size: 0.875rem;
font-weight: 290;
}
.btn{
text-align: center;
background-color: #1565D8;
color: #FFFFFF;
height: 4rem;
font-size: 1.5rem;
font-weight: 290;
border-radius: 0.375rem;
border-style: none;
margin-top: 5rem;
}
			`}</style>
		</div>
	</>;
}
